<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Carousel Example</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
      </div>
      <button class="carousel-control prev" onclick="prevSlide()">
        &#10094;
      </button>
      <button class="carousel-control next" onclick="nextSlide()">
        &#10095;
      </button>
      <div class="carousel-dots">
        <span class="dot active" onclick="showSlide(0)"></span>
        <span class="dot" onclick="showSlide(1)"></span>
        <span class="dot" onclick="showSlide(2)"></span>
      </div>
    </div>
    <script>
      // script.js
      let currentIndex = 0;
      const items = document.querySelectorAll(".carousel-item");
      const dots = document.querySelectorAll(".dot");
      const totalItems = items.length;

      function showSlide(index) {
        if (index >= totalItems) {
          currentIndex = 0;
        } else if (index < 0) {
          currentIndex = totalItems - 1;
        } else {
          currentIndex = index;
        }

        // Update slides and dots
        items.forEach((item, i) => {
          item.classList.toggle("active", i === currentIndex);
        });
        dots.forEach((dot, i) => {
          dot.classList.toggle("active", i === currentIndex);
        });

        const offset = -currentIndex * 100;
        document.querySelector(
          ".carousel-inner"
        ).style.transform = `translateX(${offset}%)`;
      }

      function nextSlide() {
        showSlide(currentIndex + 1);
      }

      function prevSlide() {
        showSlide(currentIndex - 1);
      }

      // Auto-play functionality
      let autoPlayInterval;
      function startAutoPlay() {
        stopAutoPlay();
        autoPlayInterval = setInterval(() => {
          currentIndex = (currentIndex + 1) % totalItems;
          showSlide(currentIndex);
        }, 3000); // Change slide every 3 seconds
      }

      function stopAutoPlay() {
        clearInterval(autoPlayInterval);
      }

      // Initialize the carousel with the first slide active
      showSlide(currentIndex);

      // Start auto-play when the page loads
      //   startAutoPlay();

      // Stop auto-play when interacting with the carousel
      //   document
      //     .querySelector(".carousel")
      //     .addEventListener("mouseenter", stopAutoPlay);
      //   document.querySelector(".carousel").addEventListener("mouseleave", () => {
      //     setTimeout(startAutoPlay, 2000);
      //   });
    </script>
  </body>
</html>
